<template>
  <div>
    <div class="check">
      <div class="checktop">
        <div class="checkqc">
          <p>请仔细核对您的行程</p>
          <div class="readyxd">
            <div class="readyxd-left">已选行程</div>
            <div class="readyxd-right">
              <div class="title">
                <h3>{{flightRecords.flightLeavePort}}</h3>
                <div class="plane"></div>
                <h3>{{flightRecords.flightArrivePort}}</h3>
              </div>
              <div class="data">
                <span>{{flightRecords.flightLeaveTime}}</span>
                <span>{{flightRecords.flightArriveTime}}</span>
              </div>
              <div>
                {{flightRecords.flightNumber}} | {{flightRecords.airlineCompany.airlineModel}} | 欢乐抢 | 舱位 : {{flightRecords.cabinType.cabinName}} | 托运行李 : 无 | 餐食 : 无
                | 消费积分奖励:无 乘机积分奖励:无
              </div>
            </div>
          </div>
        </div>


        <div class="pricenote" >
          <div class="pricenote-node">
            <p>机票价格信息</p>
            <p>￥{{flightRecords.flightPrice}}</p>
          </div>
          <div class="pricenotejt">
            <div>
              <span>旅客 1</span>
              <span>成人</span>
              <span>￥{{flightRecords.flightPrice}}</span>
              <span class="next" @click="next"></span>
            </div>
            <div v-if="ishow">
              <p>机票价:￥{{flightRecords.flightPrice}}</p>
              <p>机建税:￥50</p>
              <p>燃油税:￥0</p>
              <p>总计：￥{{flightRecords.flightPrice+50}}</p>
            </div>
          </div>
        </div>


      </div>
      <div class="tgq">
        <p>退改签规则</p>
        <div class="box">
          <table>
            <tr>
              <td>警残票</td>
              <td>航班规定离站前7天(含)之前提出</td>
              <td>航班规定离站前7天至72小时(含)之前提出</td>
              <td>航班规定离站前72小时至4小时(含)之前提出</td>
              <td>航班规定离站前4小时之后提出</td>
            </tr>
            <tr>
              <td>变更费</td>
              <td>21</td>
              <td>63</td>
              <td>336</td>
              <td>378</td>
            </tr>
            <tr>
              <td>退票费</td>
              <td>42</td>
              <td>84</td>
              <td>378</td>
              <td>
                不允许退票，仅限退还已经代为实际征收的民航发展基金和燃油附加费
              </td>
            </tr>
          </table>
          <div class="cj">
            <p>残警：</p>
            自愿变更: 航班规定离站时间前7天（含）之前提出: 收取客票价5%的变更费;
            航班规定离站时间前7天至72小时（含）之内提出: 收取客票价15%的变更费;
            航班规定离站时间前72小时至4小时（含）之内提出:
            收取客票价80%的变更费; 航班规定离站时间前4小时之后提出:
            收取客票价90%的变更费。 自愿退票:
            航班规定离站时间前7天（含）之前提出: 收取客票价10%的退票费;
            航班规定离站时间前7天至72小时（含）之内提出: 收取客票价20%的退票费;
            航班规定离站时间前72小时至4小时（含）之内提出:收取客票价90%的退票费;
            航班规定离站时间前4小时之后提出:
            不允许退票，仅限退还民航发展基金和燃油附加费。
          </div>
        </div>
      </div>
      <div class="btn" style="margin-bottom: 120px;" >
        <el-button type="primary" @click="prevstep">重新购票</el-button>
        <el-button type="primary" @click="nextstep(flightRecords.flightId)">立即预定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['tempdate1'],
  data() {
    return {
      ishow: false,
      //飞机详情数组
      flightRecords: [
        {}
      ],
    };
  },
  created() {
    this.findFlightRecordsByIdFlightRecords();
  },
  methods: {
    next() {
      this.ishow = !this.ishow;
    },
    nextstep(flightId) {
      this.$emit("nextstep");
      var param = {flightId:flightId}
      this.changedate(param);
    },
    prevstep() {
      this.$emit("prevstep");
    },
    changedate(param) {
      this.$emit("changedate", { step: 2, data: param });
    },
    findFlightRecordsByIdFlightRecords(){
      this.$http.get("http://localhost:1234/records/findFlightRecordsByIdFlightRecords?flightId="+this.tempdate1.flightId).then(res=>{
        this.flightRecords = res.data.frs;
      })
    }
  },
};
</script>

<style scoped>
table {
  margin-top: 10px;
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ccc;
  padding: 10px;
}
.check {
  width: 1022px;
}
.checktop {
  display: flex;
  justify-content: space-between;
}

.checkqc {
  width: 78%;
  border: 1px #ccc solid;
}
.checkqc p {
  background: #ccc;
  padding: 20px;
}
.pricenote {
  width: 20%;
  position: relative;
}
.pricenote-node {
  background: rgb(64,158,255);
  padding: 13px;
  color: #fff;
  font-size: 18px;
  font-weight: 100;
}
.pricenotejt {
  width: 100%;
  border: 1px #ccc solid;
  position: absolute;
  background: #fff;
}
.pricenotejt .next {
  display: inline-block;
  height: 14px;
  width: 14px;
  cursor: pointer;
  background: url("../assets/air_images/map-bg.png") top right no-repeat;
}
.pricenotejt div:nth-of-type(1) {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.pricenotejt div:nth-of-type(2) {
  font-size: 12px;
  color: #ccc;
  margin-top: 10px;
}
.tgq {
  width: 100%;
  margin: 20px 0;
}
.tgq > p {
  background: #ccc;
  padding: 20px;
}
.tgq .box {
  border: 1px #ccc solid;
  padding: 10px;
}
.tgq .cj {
  border: 1px #ccc solid;
  padding: 10px;
  margin-top: 10px;
}
.btn {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 20px;
}
.readyxd {
  margin: 10px 0;
  display: flex;
  align-items: center;
}
.readyxd-left {
  width: 25px;
  background-color: #785459;
  color: white;
  font-size: 14px;
  text-align: center;
  height: 79px;
  font-family: MicrosoftYaHei, 微软雅黑;
  list-style: none;
}
.readyxd .plane {
  background: url("../assets/air_images/map-booking.png") no-repeat;
  background-position: 0 -27px;
  width: 71px;
  height: 27px;
  margin: 0 20px;
}
.readyxd .title,
.readyxd .data {
  display: flex;
  justify-content: space-evenly;
}
.readyxd-right {
  margin-left: 10px;
}
.readyxd .data {
  margin: 4px 0;
}
</style>
